<template>
  <div class="channel">
    <Appheader :parentToChild="ymname" @refresh="refresh" ref="loginStatus"></Appheader>
    <swiper :swiperlist="SwiperList"></swiper>
    <!-- 页面版心 1200px -->
    <div class="version">
      <!-- 页面内容第一行父盒子 -->
      <div class="first">
        <!-- 热点推荐 -->
        <div class="hot_recommendation">
          <!-- 内容盒子 固定整体内容位置-->
          <div class="hot_recommendation_continner">
            <!-- 头部标题 链接按钮框 -->
            <div class="hot_recommendation_title">
              <!-- 链接区 -->
              <!-- <div class="link" @click.stop="ToTushu(4)">
                <div class="link_text">全部</div>
                <img src="../../assets/pindaoye/right.png" class="link_icon" alt />
              </div> -->
            </div>
            <!-- 主题内容区 -->
            <div class="hot_recommendation_content">
              <!-- 内容左侧栏 -->
              <div class="hot_recommendation_content_left">
                <!-- 左侧栏上部图片 -->
                <img
                  src="../../assets/pindaoye/logo.png"
                  class="hot_recommendation_content_left_img"
                  alt
                />
                <!-- 左侧栏下部按钮区 -->
                <div class="hot_recommendation_content_left_button">
                  <!-- 艺考资讯按钮 -->
                  <div class="art_info_button buttonBox">
                    <img src="../../assets/pindaoye/info_button.png" class="button_icon" alt />
                    <div class="button_text" @click.stop="ToTushu(1,2)">艺考攻略</div>
                  </div>
                  <!-- 艺考资料按钮 -->
                  <div class="art_datum_button buttonBox">
                    <img src="../../assets/pindaoye/datum_button.png" class="button_icon" alt />
                    <div class="button_text" @click.stop="ToTushu(1,3)">招生简章</div>
                  </div>
                  <!-- 艺考选课按钮 -->
                  <div class="art_course_button buttonBox">
                    <img src="../../assets/pindaoye/course_button.png" class="button_icon" alt />
                    <div class="button_text" @click.stop="ToTushu(1,4)">考试大纲</div>
                  </div>
                  <!-- 依靠图书按钮 -->
                  <div class="art_book_button buttonBox">
                    <img src="../../assets/pindaoye/exam_kao.png" class="button_icon" alt />
                    <div class="button_text" @click.stop="ToTushu(1,5)">报名考试</div>
                  </div>
                  <!-- 依靠图书按钮 -->
                  <div class="art_book_button buttonBox">
                    <img src="../../assets/pindaoye/book_button.png" class="button_icon" alt />
                    <div class="button_text" @click.stop="ToTushu(1,6)">成绩公布</div>
                  </div>
                  <!-- 依靠图书按钮 -->
                  <div class="art_book_button buttonBox">
                    <img src="../../assets/pindaoye/exam_book.png" class="button_icon" alt />
                    <div class="button_text" @click.stop="ToTushu(1,7)">备考资料</div>
                  </div>
                </div>
              </div>
              <!-- 内容右侧栏 -->
              <div class="hot_recommendation_content_right">
                <div class="hot_Title_text">热点推荐</div>
                <!-- 列表元素 -->
                <div class="li" v-for="item in ZiuxnList" :key="item.id" @click="tozixun(item.id)">
                  <!-- <div class="li_dose"></div> -->
                  <div class="li_title">{{item.title}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 时间安排 -->
        <div class="Time_arrange">
          <!-- 内容盒子 -->
          <div class="Time_arrange_continner">
            <!-- 标题栏 -->
            <div class="Time_arrange_continner_title">
              <!-- 标题栏图标 -->
              <!-- <img
                src="../../assets/pindaoye/calinder.png"
                class="Time_arrange_continner_title_icon"
                alt
              /> -->
              <!-- 标题栏文字 -->
              <div class="Time_arrange_continner_title_text">时间安排</div>
            </div>
            <!-- 介绍栏 -->
            <div class="introduce">影视编导考试时间具体安排:</div>
            <!-- 内容栏 -->
            <div class="Time_arrange_content" v-html="TimeArrange">
              <!-- 时间轴 -->
              <!-- <el-timeline class="Time_arrange_content" :reverse="true">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                >{{activity.timestamp+activity.content}}</el-timeline-item>
              </el-timeline>-->
            </div>
          </div>
        </div>
      </div>
      <!-- 辅导课程 -->
      <div class="coach_Corse">
        <!-- 辅导课程内容父盒子 固定整体内容宽高和位置 -->
        <div class="coach_Course_continner">
          <!-- 标题栏区域 -->
          <div class="coach_Corse_title_link">
            <!-- 标题区域 -->
            <div class="coach_Corse_title">
              <!-- <img src="../../assets/pindaoye/coachCourse.png" class="coach_Corse_title_icon" alt /> -->
              <div class="coach_Corse_title_text">辅导课程</div>
            </div>
            <!-- 链接区 -->
            <div class="link" @click.stop="ToTushu(11)">
              <div class="link_text">查看更多>></div>
              <!-- <img src="../../assets/pindaoye/right.png" class="link_icon" alt /> -->
            </div>
          </div>
          <!-- 课程列表 -->
          <div class="courselist">
            <!-- 商品卡片 -->
            <div
              class="course_card"
              v-for="item in XuankeList"
              :key="item.id"
              @click="toKeD(item.id)"
            >
              <!-- 商品图片 -->
              <img :src="item.photo1" class="course_img" alt />
              <!-- 商品标题 -->
              <div class="course_title">{{item.title}}</div>
              <!-- 商品价格 -->
              <div class="course_price">
                <!-- 现价 -->
                <div class="course_price_now">¥{{item.price}}元</div>
                <!-- 原价 -->
                <div class="course_price_old">定价{{item.dingjia}}元</div>
              </div>
              <!-- 加入购物车按钮 -->
              <div class="course_addCar" @click.stop="addcar(item.id)">
                <!-- <img src="../../assets/pindaoye/cartadd.png" class="course_addCar_icon" alt /> -->
                <div class="course_addCar_text">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 免费试听 授课名师-->
      <div class="free_Audition_Teacher">
        <!-- 免费试听 -->
        <div class="free_Audition">
          <!-- 标题栏 -->
          <div class="free_Audition_title">
            <!-- 标题区域 -->
            <div class="free_Adition_title_">
              <!-- 标题栏图标 -->
              <!-- <img
                src="../../assets/pindaoye/freeAudition.png"
                class="free_Audition_title_icon"
                alt
              /> -->
              <!-- 标题栏文字 -->
              <div class="free_Audition_title_text">免费试听</div>
            </div>
            <!-- 链接区 -->
            <div class="link" @click.stop="ToFreeCourse()">
              <div class="link_text">查看更多>></div>
              <!-- <img src="../../assets/pindaoye/right.png" class="link_icon" alt /> -->
            </div>
          </div>
          <!-- 课程列表 -->
          <div class="free_course_list">
            <!-- 课程卡片 -->
            <div
              class="free_course_card"
              v-for="item in FreeList"
              :key="item.id"
              @click.stop="toDetail(item.id)"
            >
              <!-- 图片 -->
              <img :src="item.photo" class="free_course_img" alt />
              <!-- 详情 -->
              <div class="free_course_detail">
                <div class="free_course_title">{{item.title}}</div>
                <!-- <div class="free_course_auther">{{item.ykAuthor == null ?'作者不祥': item.ykAuthor.authorName}}</div> -->
              </div>
            </div>
          </div>
        </div>
        <!-- 授课名师 -->
        <div class="Teacher">
          <!-- 标题栏 -->
          <div class="Teacher_title">
            <!-- 标题区域 -->
            <div class="Teacher_title_">
              <!-- 标题栏图标 -->
              <!-- <img src="../../assets/pindaoye/Teacher.png" class="Teacher_title_icon" alt /> -->
              <!-- 标题栏文字 -->
              <div class="Teacher_title_text">授课名师</div>
            </div>
            <!-- 链接区 -->
            <div class="link" @click.stop="ToTeacher()">
              <div class="link_text">查看更多>></div>
              <!-- <img src="../../assets/pindaoye/right.png" class="link_icon" alt /> -->
            </div>
          </div>
          <!-- 名师列表 -->
          <div class="Teacher_list">
            <!-- 名师卡片 -->
            <div
              class="Teacher_card"
              v-for="item in TeacherList"
              :key="item.id"
              @click="toteachD(item.id)"
            >
              <img :src="item.authorPhoto" class="Teacher_img" alt />
              <div class="Teacher_name">{{item.authorName}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 辅导图书 -->
      <div class="coach_Book">
        <div class="coach_Book_continner">
          <!-- 标题栏 -->
          <div class="coach_Book_title">
            <!-- 标题区域 -->
            <div class="coach_Book_title_">
              <!-- 标题栏图标 -->
              <!-- <img src="../../assets/pindaoye/coachBook.png" class="coach_Book_title_icon" alt /> -->
              <!-- 标题栏文字 -->
              <div class="coach_Book_title_text">辅导图书</div>
            </div>
            <!-- 链接区 -->
            <div class="link" @click.stop="ToTushu(10)">
              <div class="link_text">查看更多>></div>
              <!-- <img src="../../assets/pindaoye/right.png" class="link_icon" alt /> -->
            </div>
          </div>
          <!-- 图书列表 -->
          <div class="book_list">
            <!-- 图书卡片 -->
            <div
              class="book_card"
              v-for="item in TushuList"
              :key="item.id"
              @click.stop="totushuD(item.id)"
            >
              <!-- 图片 -->
              <div class="book_img">
                <img :src="item.photo" alt />
              </div>
              <!-- 书名 -->
              <div class="book_title">{{item.title}}</div>
              <!-- 价格 -->
              <!-- <div class="book_price">
                <div class="book_price_now">￥{{item.price}}元</div>
                <div class="book_price_old">{{item.dingjia}}元</div>
              </div> -->
              <!-- 评价和购买量 -->
              <div class="book_appraise_buynum">
                <div class="c_bottom_d flex">
                  <!-- <el-rate
                    v-model="item.star"
                    disabled
                    :colors="['#fc7023', '#fc7023', '#fc7023']"
                    disabled-void-color="#999"
                  ></el-rate> -->
                  <div class="book_price_now">￥{{item.price}}元</div>
                  <div>{{item.buyNum}}人购买</div>
                </div>
              </div>
              <!-- 加入购物车按钮 -->
              <div class="book_addCar" @click.stop="addcar(item.id)">
                <!-- <img src="../../assets/pindaoye/cartadd.png" class="book_addCar_icon" alt /> -->
                <div class="book_addCar_text">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import {
  rotationChart2,
  mationlist,
  channelTime,
  ykGoodslist,
  ykAuthorlist,
  addcar
} from "../../api/index.js";
import Appheader from "./headers";
import Appfooter from "../footer";
import swiper from "./swiper";
export default {
  props: {},
  data() {
    return {
      ymname: "频道页",

      SwiperList: [],
      // 时间安排区 时间轴内容 暂时不用
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15"
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13"
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11"
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13"
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11"
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13"
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11"
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13"
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11"
        }
      ],
      // 时间轴数据 暂时启用
      TimeArrange: [],
      // 辅导课程列表
      XuankeList: [],
      // 免费试听列表
      FreeList: [],
      // 艺考名师列表
      TeacherList: [],
      // 辅导图书列表
      TushuList: [],
      // 热点推荐咨询列表
      ZiuxnList: [],
      // 学校 校招
      ischool: "",
      // 地址 统考
      iaddr: "",
      // 招生模式  0统考 1校招
      itype: "0",
      // 咨询类型
      zixuntype: 1,
      profationId: ""
    };
  },
  computed: {},
  created() {
    sessionStorage.removeItem("nowPage");
    this.itype = this.$route.params.type;
    this.profationId = this.$route.params.profationId;
    if (
      this.profationId == "" ||
      this.profationId == null ||
      this.profationId == undefined
    ) {
      this.itype = localStorage.getItem("type");
      this.profationId = localStorage.getItem("profationId");
    } else {
      localStorage.setItem("type", this.itype);
      localStorage.setItem("profationId", this.profationId);
    }
    // console.log(this.profationId);
    let msg = {
      pId: this.profationId,
      itype: this.itype
    };
    rotationChart2(this.qs(msg))
      .then(res => {
        // console.log(res);
        this.SwiperList = res.data.rows;
      })
      .catch(e => {});
    // 请求资讯列表 渲染热点推荐数据
    this.GetZixunList();
    // 请求时间安排数据 渲染时间安排板块内容
    this.GetTimeArrange();
    // 请求辅导课程列表 渲染辅导课程板块内容
    this.GetxuankeList(2, 0, 3);
    // 请求免费试听列表 渲染免费试听板块内容
    this.GetxuankeList(2, 1, 4);
    // 请求名师列表 渲染依靠名师板块内容
    this.GetTeacherList();
    // 请求辅导图书列表 渲染辅导图书板块内容
    this.GetxuankeList(3, 0, 3);
  },
  mounted() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  },
  watch: {},
  methods: {
    refresh(res) {
      this.itype = res.type;
      this.profationId = res.id;
      localStorage.setItem("type", this.itype);
      localStorage.setItem("profationId", this.profationId);
      this.GetZixunList();
      // 请求辅导课程列表 渲染辅导课程板块内容
      this.GetxuankeList(2, 0, 3);
      // 请求免费试听列表 渲染免费试听板块内容
      this.GetxuankeList(2, 1, 4);
      // 请求名师列表 渲染依靠名师板块内容
      this.GetTeacherList();
      // 请求辅导图书列表 渲染辅导图书板块内容
      this.GetxuankeList(3, 0, 3);
    },
    // 请求资讯列表  默认请求校招
    GetZixunList() {
      let msg = {
        toutiao: 1,
        itype: this.itype,
        iaddr: this.iaddr,
        ischool: this.ischool,
        type: this.profationId,
        pageNum: 1,
        pageSize: 9
      };
      mationlist(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.ZiuxnList = res.data.rows;
          } else {
            this.$message("暂无热点推荐列表数据");
          }
        })
        .catch(err => {});
    },
    // 请求时间安排数据
    GetTimeArrange() {
      let msg = {
        title: "时间安排"
      };
      channelTime(this.qs(msg))
        .then(res => {
          // console.log(res);
          if (res.data.code == 0) {
            this.TimeArrange = res.data.ykPc.content;
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch(err => {});
    },
    // 获取辅导课程2 图书3
    GetxuankeList(type, free, num) {
      let msg = {
        type: type,
        pId: this.profationId,
        pageNum: 1,
        pageSize: num,
        free: free
      };
      ykGoodslist(this.qs(msg))
        .then(res => {
          // console.log(res);
          if (res.data.code == 0) {
            if (type == 2) {
              if (free == 0) {
                this.XuankeList = res.data.rows;
              } else {
                this.FreeList = res.data.rows;
              }
            } else {
              for (let i = 0; i < res.data.rows.length; i++) {
                res.data.rows[i].star = res.data.rows[i].star - 0;
              }
              this.TushuList = res.data.rows;
            }
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch(e => {});
    },
    // 获取名师列表
    GetTeacherList() {
      let msg = {
        sId: "",
        pId: this.profationId,
        pageSize: 4,
        pageNum: 1
      };
      ykAuthorlist(this.qs(msg))
        .then(res => {
          // console.log(res);
          if (res.data.code == 0) {
            this.TeacherList = res.data.rows;
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch(err => {});
    },
    // 进入艺考内容页
    ToTushu(i,type) {
      if (i == 1) {
        this.$router.push({
          name: "zixunLists",
          params: {
            type: this.itype,
            zixuntype: type,
            pId: this.profationId
          }
        });
      } else if (i == 11) {
        this.$router.push({
          name: "xuankeLists",
          params: {
            type: this.itype,
            pId: this.profationId
          }
        });
      } else if (i == 10) {
        this.$router.push({
          name: "tushuLists",
          params: {
            type: this.itype,
            pId: this.profationId
          }
        });
      }
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //图书详情
    totushuD(id) {
      this.$router.push({
        name: "tushuDetail",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //课程详情
    toKeD(id) {
      this.$router.push({
        name: "xuankeDetail",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    // 进入授课名师
    ToTeacher() {
      this.$router.push({
        name: "shoukeList"
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //名师详情
    toteachD(id) {
      this.$router.push({
        name: "guwenDetail",
        params: {
          id: id,
          name: "授课名师"
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //免费视频
    toDetail(id) {
      this.$router.push({
        name: "keList",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //免费试听全部
    ToFreeCourse() {
      this.$router.push({
        name: "callus"
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    // addcar(id) {
    //   if (localStorage.getItem("YKuserid")) {
    //     let msg = {
    //       userId: localStorage.getItem("YKuserid"),
    //       goodsId: id,
    //       booknum: 1
    //     };
    //     addcar(this.qs(msg))
    //       .then(res => {
    //         this.$message({
    //           type: "info",
    //           message: res.data.msg
    //         });
    //         if (res.data.code == 0) {
    //           this.info = res.data.ykGoods;
    //           this.$parent.touserDetail();
    //         }
    //       })
    //       .catch(e => {});
    //   } else {
    //     this.$parent.tologin();
    //     this.$message({
    //       type: "error",
    //       message: "请登录"
    //     });
    //     return;
    //   }
    // },
    addcar(id) {
      if (localStorage.getItem("YKuserid")) {
        let msg = {
          userId: localStorage.getItem("YKuserid"),
          goodsId: id,
          booknum: 1
        };
        addcar(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            if (res.data.code == 0) {
              this.info = res.data.ykGoods;
              this.$refs.loginStatus.userDetail();
            }
          })
          .catch(e => {});
      } else {
        this.$refs.loginStatus.login();
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        return;
      }
    },
    //资讯详情
    tozixun(id) {
      sessionStorage.setItem("nowPage", "yikaozixunDetailPd");
      this.$router.push({
        name: "zixunDetail",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
  components: { Appheader, Appfooter, swiper }
};
</script>

<style scoped>
.channel {
  /* background: #f4f4f4; */
}
/* 页面版心 */
.version {
  margin: 22px auto 0;
  width: 1200px;
  min-width: 1200px;
  cursor: default;
}

/* 鼠标默认样式 */
.cursorpointer {
  cursor: pointer;
}
/*滚动条样式*/
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

/* 页面所有标题栏链接样式 */
.link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 14px;
  cursor: pointer;
}
.link_text {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #a8aab6;
}
.link_icon {
  width: 7px;
  height: 13px;
}
/* 时间轴单个内容行的样式 */
.el-timeline-item__content {
  border-bottom: 0.05px solid #ccc !important;
}
/* 热点推荐 时间安排---------------- */
.first {
  /* 页面内容第一行父盒子 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
/* 热点推荐----------- */
.hot_recommendation {
  /* 热点推荐 */
  width: 824px;
  height: 459px;
}
.hot_recommendation_continner {
  /*热点推荐内容盒子 固定整体内容位置*/
  width: 770px;
}
.hot_recommendation_title {
  /* 头部标题 链接按钮框 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 24px;
}
.hot_recommendation_title_title {
  /* 热点推荐标题区 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 126px;
  height: 100%;
  cursor: default;
}
.hot_Title_icon {
  /* 热点推荐标题图标 */
  height: 22px;
  width: 24px;
}
.hot_Title_text {
  /* 热点推荐标题文字 */
  font-size: 23px;
  font-family: Microsoft YaHei;
  color: #c7aa4e;
}
.hot_recommendation_content {
  /* 主题内容区 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.hot_recommendation_content_left {
  /* 内容左侧栏 */
  width: 390px;
  height: 100%;
}
.hot_recommendation_content_left_img {
  /* 左侧栏上部图片 */
  width: 390px;
  height: 263px;
}
.hot_recommendation_content_left_button {
  /* 左侧栏下部按钮区 */
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  background: #363640;
  margin-top:15px;
}
.hot_recommendation_content_left_button > div {
  /* 左侧栏下部按钮区直接子元素统一样式 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex:0 0 33.33%;
  height: 50px;
  cursor: pointer;
}
.art_info_button > img {
  /* 按钮盒子图标 */
  height: 24px;
  width: 28px;
}
.buttonBox:hover > .button_text {
  color: #aaabbf !important;
}
.button_text {
  /* 按钮盒子文字 */
  margin-left: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #aaabbf;
  line-height: 18px;
}
.hot_recommendation_content_right {
  /* 内容右侧栏 */
  display: flex;
  justify-content: start;
  flex-direction: column;
  height: 100%;
  width: 360px;
  overflow-y: scroll;
}

.li {
  /* 列表单个元素 */
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 20px;
  width: 100%;
  height: 17px;
  cursor: pointer;
}
.li:hover > .li_title {
  color: #c7aa4e !important;
}
.hot_recommendation_content_right > div:first-child {
  margin: 0;
}
.li_dose {
  /* 小红点 */
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #d81417;
}
.li_title {
  /* 列表标题 */
  max-width: 350px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #a9aabc;
}
/* 热点推荐----------- */

/* 时间安排----------- */
.Time_arrange {
  /* 时间安排 */
  width: 351px;
  height: 459px;
}
.Time_arrange_continner {
  /* 内容盒子 固定内容区域大小和位置 */
  margin: 31px auto 0;
  width: 300px;
  height: 409px;
}
.Time_arrange_continner_title {
  /* 标题栏 */
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 24px;
}
.Time_arrange_continner_title_icon {
  /* 标题栏图标 */
  height: 22px;
  width: 24px;
}
.Time_arrange_continner_title_text {
  /* 标题栏文字 */
  font-size: 23px;
  font-family: Microsoft YaHei;
  color: #c7aa4e;
}
.introduce {
  /* 介绍栏 */
  margin-top: 29px;
  width: 270px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #abacbe;
  line-height: 18px;
}
.Time_arrange_content {
  /* 内容栏 */
  margin-top: 17px;
  height: 321px;
  width: 100%;
  overflow-y: scroll;
}
.Time_arrange_content >>> img {
  height: 100%;
  width: 100%;
}
/* 时间安排----------- */
/* 热点推荐 时间安排---------------- */

/* 辅导课程---------------- */
.coach_Corse {
  /* 辅导课程 */
  margin: 14px auto 0;
  width: 100%;
  height: 436px;
  background: #363640;
  overflow: hidden;
}
.coach_Course_continner {
  /* 辅导课程内容父盒子 固定整体内容宽高和位置 */
  margin: 29px auto 0;
  width: 1162px;
  height: 368px;
}
.coach_Corse_title_link {
  /* 标题栏区域 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 24px;
}
.coach_Corse_title {
  /* 标题区域 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  width: 133px;
}
.coach_Corse_title_icon {
  /* 标题区域图标 */
  height: 24px;
  width: 25px;
}
.coach_Corse_title_text {
  /* 标题栏文字 */
  font-size: 24px;
  font-family: Microsoft YaHei;
  color: #c7aa4e;
}
.courselist {
  /* 课程列表 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 35px;
  height: 309px;
  width: 100%;
}
.course_card {
  /* 商品卡片 */
  width: 344px;
  height: 309px;
}
.courselist > .course_card:first-child {
  /* margin-left: 10px; */
}
.course_img {
  /* 商品图片 */
  width: 342px;
  height: 199px;
  border-radius: 10px;
}
.course_title {
  /* 商品标题 */
  margin: 8px auto 0;
  text-align: center;
  font-size: 18px;
  padding: 10px 0;
  font-weight: 500;
  color: #babbbf;
}
.course_price {
  /* 商品价格 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  width: 100%;
}
.course_price_now {
  /* 现价 */
  font-size: 18px;
  font-weight: 400;
  color: #c7aa4e;
}
.course_price_old {
  /* 原价 */
  margin-left: 75px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  text-decoration: line-through;
  color: rgba(153, 153, 153, 1);
}
.course_addCar {
  /* 加入购物车按钮 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto 0;
  width: 268px;
  height: 36px;
  border: 1px solid #444750;
  border-radius: 36px;
}
.course_addCar:hover {
  cursor: pointer;
}
.course_addCar_icon {
  /* 图标 */
  width: 14px;
  height: 12px;
}
.course_addCar_text {
  /* 文字 */
  margin-left: 4px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #78798b;
}
/* 辅导课程---------------- */

/* 免费试听 授课名师---------------- */
.free_Audition_Teacher {
  /* 免费试听 授课名师 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 23px auto 0;
  width: 100%;
  height: 614px;
  background: #363640;
}
/* 免费试听--------------- */
.free_Audition {
  /* 免费试听 */
  margin-top: 33px;
  margin-left: 15px;
  width: 760px;
  height: 565px;
}
.free_Audition_title {
  /* 标题栏 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 24px;
}
.free_Adition_title_ {
  /* 标题区域 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  width: 133px;
}
.free_Audition_title_icon {
  /* 标题栏图标 */
  height: 24px;
  width: 25px;
}
.free_Audition_title_text {
  /* 标题栏文字 */
  font-size: 24px;
  font-family: Microsoft YaHei;
  color: #c9a253;
}
.free_course_list {
  /* 课程列表 */
  display: flex;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 38px;
  width: 733px;
  height: 504px;
}
.free_course_card {
  /* 免费课程卡片 */
  margin-left: 53px;
  height: 227px;
  width: 337px;
  position: relative;
}
.free_course_list > .free_course_card:nth-child(2n + 1) {
  margin-left: 0;
}
.free_course_img {
  width: 337px;
  height: 197px;
  border-radius: 20px;
}
.free_course_detail {
  /* 课程介绍 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.free_course_title {
  /* 课程标题 */
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  position: absolute;
  left:0;
  bottom: 30px;
  line-height: 40px;
  background: rgba(0,0,0,0.5);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: #c3c1c4;
  padding:0 15px;
  box-sizing: border-box;
}
.free_course_auther {
  width: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
/* 免费试听--------------- */

/* 授课名师--------------- */
.Teacher {
  /* 授课名师 */
  margin-top: 33px;
  margin-right: 25px;
  width: 352px;
  height: 565px;
}
.Teacher_title {
  /* 标题栏 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 24px;
}
.Teacher_title_ {
  /* 标题区域 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  width: 133px;
}
.Teacher_title_icon {
  /* 标题栏图标 */
  height: 24px;
  width: 25px;
}
.Teacher_title_text {
  /* 标题栏文字 */
  font-size: 24px;
  font-family: Microsoft YaHei;
  color: #c9a253;
}
.Teacher_list {
  /* 名师列表 */
  display: flex;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 37px;
  width: 100%;
  height: 476px;
}
.Teacher_card {
  /* 名师卡片 */
  position: relative;
  margin-left: 9px;
  width: 167px;
  height: 224px;
  border-radius: 167px;
  border:1px solid #615346;
  box-sizing: border-box;
  overflow: hidden;
}
.Teacher_list > .Teacher_card:nth-child(2n + 1) {
  margin-left: 0;
}
.Teacher_img {
  /* 名师照片 */
  height: 100%;
  width: 100%;
  border-radius: 167px;
  border:5px solid #363640;
  box-sizing: border-box;
}
.Teacher_name {
  /* 名师名字  */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 167px;
  height: 40px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
/* 授课名师--------------- */
/* 免费试听 授课名师---------------- */

/* 辅导图书---------------- */
.coach_Book {
  /* 辅导图书 */
  margin: 23px auto 0;
  width: 100%;
  height: 614px;
  background: #363640;
  overflow: hidden;
}
.coach_Book_continner {
  /* 辅导图书主题内容盒子 固定整体内容大小位置 */
  margin-top: 33px;
  margin-left: 35px;
  margin-right: 35px;
  height: 547px;
}
.coach_Book_title {
  /* 标题栏 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.coach_Book_title_ {
  /* 标题区域 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  width: 133px;
}
.coach_Book_title_icon {
  /* 标题栏图标 */
  height: 24px;
  width: 25px;
}
.coach_Book_title_text {
  /* 标题栏文字 */
  font-size: 24px;
  font-family: Microsoft YaHei;
  color: #c9a253;
}
.book_list {
  /* 图书列表 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 43px;
  width: 1136px;
  height: 480px;
  padding:0 20px;
  box-sizing: border-box;
  background:url(../../assets/home_book_bg.png) no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
}
.book_card {
  /* 图书卡片 */
  width: 344px;
  height: 480px;
}
.book_img {
  /* 图片 */
  display: block;
  margin: 14px auto 0 50px;
  width: 260px;
}
.book_img img {
  width: 260px;
  height: 260px;
  border-radius: 20px;
  margin: 0 auto;
}
.book_title {
  /* 书名 */
  margin:0 auto;
  margin-top: 35px;
  width: 204px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #c2c3c7;
}
.book_price {
  /* 价格 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  width: 100%;
}
.book_price_now {
  /* 现价 */
  margin-right: 15px;
  font-size: 18px;
  font-weight: 400;
  color: #c9a253;
}
.book_price_old {
  /* 原价 */
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  text-decoration: line-through;
  color: rgba(153, 153, 153, 1);
}
.book_appraise_buynum {
  /* 评价和购买量 */
  width: 204px;
  margin:0 auto;
  padding:15px 0;
  display: flex;
  align-items: center;
}
.c_bottom_d {
  justify-content: center;
}
.c_bottom_d div{
  color: #7d7f8e;
}
.c_bottom_d .book_price_now{
  color: #c9a253;
}
.c_bottom_d >>> .el-rate__icon {
  margin-right: 0;
  font-size: 14px;
}
.c_bottom_d >>> .el-rate {
  height: 14px;
  line-height: 0px;
}
/* .c_bottom_d > div {
  color: #1a66b3;
  font-size: 12px;
  margin-left: 4px;
} */

.book_addCar {
  /* 加入购物车按钮 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px auto 0 !important;
  width: 268px;
  height: 36px;
  border: 1px solid #444750;
  border-radius: 36px;
}
.book_addCar:hover {
  cursor: pointer;
}
.book_addCar_icon {
  /* 图标 */
  width: 14px;
  height: 12px;
}
.book_addCar_text {
  /* 文字 */
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #7e8192;
}
/* 辅导图书---------------- */
</style>
